<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="group_3 flex-row justify-between">
				<view class="image-text_1 flex-row justify-between">
					<text class="text-group_1">纷析云(杭州)科技有限公司</text>
					<image class="thumbnail_1" src="/static/detail/down_arrow.png" />
				</view>
				<view class="image-text_2 flex-row justify-between">
					<text class="text-group_2">2023-11-01</text>
					<image class="thumbnail_2" src="/static/detail/down_arrow.png" />
				</view>
			</view>
			<view class="group_4 flex-col">
				<view class="list_1 flex-row">
					<view class="text-group_3 flex-col justify-between" v-for="(item, index) in loopData0" :key="index">
						<text class="text_1" v-text="item.lanhutext0"></text>
						<text class="text_2" v-text="item.lanhutext1"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="group_5 flex-col">
			<view class="box_1 flex-row justify-between">
				<view class="box_2 flex-col"></view>
				<text class="text_3">现金流分析</text>
			</view>
			<view class="box_3 flex-col">
				<view class="section_1 flex-col justify-between">
					<view class="block_1 flex-row justify-between" v-for="(item,index) in moneyList" :key="index">
						<view class="image-text_3 flex-row justify-between">
							<image class="box_4 flex-col"></image>
							<text class="text-group_4">{{item.title}}</text>
						</view>
						<text class="text_4">{{item.money}}</text>
					</view>
				</view>
			</view>

			<view class="box_6 flex-row">
				<view class="text-group_9 flex-col justify-between">
					<text class="text_9">收入/支出</text>
					<text class="text_10">金额</text>
				</view>

				<view class="box_7 flex-row">
					<view class="image-text_8 flex-row justify-between">
						<view class="group_8 flex-col"></view>
						<text class="text-group_10">收入</text>

					</view>
				</view>
				<view class="box_8 flex-row">
					<view class="image-text_9 flex-row justify-between">
						<view class="group_9 flex-col"></view>
						<text class="text-group_11">支出</text>
					</view>
				</view>
			</view>
			<view class="box_9 flex-row justify-between">
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>

		<view class="list_2 flex-col">
			<!-- 应收账款 -->
			<view class="list-items_1 flex-col">
				<view class="section_2 flex-row justify-between">
					<view class="box_16 flex-col"></view>
					<text class="text_15">应收账款</text>
				</view>

				<view class="section_3">
					<view class="text-wrapper_1">
						<text class="text_16">统计</text>
						<text class="text_16">总计金额</text>
					</view>

					<view class="text-wrapper_1" v-for="item in 4">
						<text class="text_17">纷析云(杭州)科技有限公司</text>
						<text class="text_17">98882.00</text>
					</view>


				</view>


				<text class="text_20">客户金额</text>
				<view class="charts-box">
					<qiun-data-charts type="bar" :opts="optsBar" :chartData="chartDataBar" />
				</view>
			</view>

			<!-- 应付账款 -->
			<view class="list-items_1 flex-col">
				<view class="section_2 flex-row justify-between">
					<view class="box_16 flex-col"></view>
					<text class="text_15">应收账款</text>
				</view>



				<view class="text-wrapper_1">
					<text class="text_16">统计</text>
					<text class="text_16">总计金额</text>
				</view>

				<view class="text-wrapper_1" v-for="item in 4">
					<text class="text_17">金华企客管网络科技有限公司</text>
					<text class="text_17">1688</text>
				</view>

				<text class="text_20">供货商/金额</text>
				<view class="charts-box">
					<qiun-data-charts type="bar" :opts="optsBar" :chartData="chartDataBar1" />
				</view>
			</view>

		</view>

		<view class="group_17 flex-col">
			<view class="box_17 flex-row justify-between">
				<view class="group_18 flex-col"></view>
				<text class="text_21">费用</text>
			</view>
			<view class="box_18">
				<view class="text-wrapper_2">
					<text class="text_22">管理费用</text>
					<text class="text_22">销售费用</text>
					<text class="text_24">财务费用</text>
				</view>

				<view class="text-group_13" v-for="item in 5">
					<text class="paragraph_2">
						99999.00
					</text>
					<text class="paragraph_2">
						99999.00
					</text>
					<text class="paragraph_2">
						12000.00
					</text>
				</view>


			</view>
			<view class="box_19 flex-row justify-between">
				<view class="group_19 flex-col justify-between">
					<view class="group_20 flex-row">
						<view class="image-text_12 flex-row justify-between">
							<view class="block_8 flex-col"></view>
							<text class="text-group_14">管理费用</text>
						</view>
					</view>
					<view class="group_21 flex-row">
						<view class="image-text_13 flex-row justify-between">
							<view class="group_22 flex-col"></view>
							<text class="text-group_15">销售费用</text>
						</view>
					</view>
					<view class="group_23 flex-row">
						<view class="image-text_14 flex-row justify-between">
							<view class="group_24 flex-col"></view>
							<text class="text-group_16">财务费用</text>
						</view>
					</view>
				</view>
				<view class="charts-box-pie">
					<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartDataPie" />
				</view>
			</view>
		</view>

		<view class="group_26 flex-col">
			<view class="group_27 flex-row justify-between">
				<view class="block_9 flex-col"></view>
				<text class="text_28">财务指标</text>
			</view>
			<view class="grid_1 flex-row">
				<view class="text-group_17 flex-col" v-for="(item, index) in financialTargetData" :key="index">
					<text class="text_29" v-html="item.percent"></text>
					<text class="text_30" v-html="item.title"></text>
				</view>
			</view>
		</view>

		<view class="group_28 flex-col">
			<view class="group_29 flex-col">
				<view class="group_30 flex-row justify-between">
					<view class="block_10 flex-col"></view>
					<text class="text_33">发票-小规模</text>
				</view>
				<view>
					<text class="paragraph_3">销售:</text>
					<text class="paragraph_3">{{sell}}</text>
				</view>
				<view>
					<text class="paragraph_3">增值税:</text>
					<text class="paragraph_3">{{tax}}</text>
				</view>

			</view>
			<view class="group_31 flex-col">
				<view class="block_11 flex-row justify-between">
					<view class="group_32 flex-col"></view>
					<text class="text_34">发票-一般纳税人</text>
				</view>
				<view class="text1">
					<text class="paragraph_4">销项:</text>
					<text class="paragraph_4">{{output}}张</text>
					<text class="paragraph_4">{{outputMoney}}</text>
				</view>
				<view>
					<text class="paragraph_4">进项: </text>
					<text class="paragraph_4">{{input}}张</text>
					<text class="paragraph_4">{{inputMoney}}</text>
				</view>
				<text class="text_35">差额：{{balance}}</text>
			</view>
		</view>

	</view>
</template>
<script>
	import echarts from '../../components/echarts/echarts.vue';
	export default {
		components: {
			echarts,
		},
		data() {
			return {
				balance: "3000.00", //差额
				sell: "889955.00", //销售
				tax: "21983.00", //增值税
				output: "100",
				outputMoney: "888888.00", //销项
				input: "98",
				inputMoney: "29999.00", //进项
				loopData0: [{
						lanhutext0: '198222.00',
						lanhutext1: '收入'
					},
					{
						lanhutext0: '29881.00',
						lanhutext1: '利润'
					},
				],
				companyList: [{
					name: "",
					money: "22998.00"
				}],
				moneyList: [{

						title: "现金",
						money: "22998.00"
					},
					{
						title: "交通银行",
						money: "22998.00"
					},
					{
						title: "招商银行",
						money: "22998.00"
					},
					{
						title: "杭州银行",
						money: "22998.00"
					},
					{
						title: "兴业银行",
						money: "22211.00"
					},
					{
						title: "柳州银行",
						money: "22211.00"
					},
				],

				financialTargetData: [{
						percent: '68%',
						title: '毛利率'
					},
					{
						percent: '56%',
						title: '毛利率'
					},
					{
						percent: '72%',
						title: '毛利率'
					},
					{
						percent: '45%',
						title: '毛利率'
					},
					{
						percent: '62%',
						title: '毛利率'
					},
					{
						percent: '69%',
						title: '毛利率'
					}, {
						percent: '81%',
						title: '毛利率'
					},
				],
				constants: {},

				// ==============柱状图===============
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#3C72FF", "#00BAAD"],
					padding: [13, 13, 0, 5],
					enableScroll: false,
					legend: { // 图例配置
						show: false, // 是否显示图例标识
						position: "top", // 收入，支出在顶部
						float: "right" //靠右边对齐
					},
					xAxis: {
						axisLine: false, // 不绘制坐标轴轴线
						disableGrid: true
					},
					yAxis: {
						disabled: true, // 不绘制Y轴
						gridColor: "#ffffff", //网格线颜色
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				// ==============柱状图===============

				//=============条状图1、2================
				chartDataBar: {},
				chartDataBar1: {},
				optsBar: {
					color: ["#3C72FF"],
					padding: [10, 35, 0, 15],
					enableScroll: false,
					legend: {
						show: false, // 是否显示图例标识
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						axisLine: false,
						// gridColor: "#ffffff", //网格线颜色
						disableGrid: true,
						disabled: true
					},
					yAxis: {
						disabled: true, // 不绘制Y轴
					},
					extra: {
						bar: {
							type: "stack",
							width: 18,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 1
						}
					}
				},
				//============饼图===============
				chartDataPie: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optsPie: {
					color: ["#1890FF", "#00BAAD", "#FFA800"],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					legend: { // 图例配置
						show: false, // 是否显示图例标识
						position: "left", // 收入，支出在顶部
						float: "right", //靠右边对齐
						// itemGap: 40 //各个分类（类别）之间的间隔
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 260,
							labelWidth: 0,
							labelColor: "#fff",
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
			};
		},
		onReady() {
			this.getServerData();
			this.getServerDataBar();
			this.getServerDataBar1();
			this.getServerDataPie();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["交通银行", "招商银行", "杭州银行", "兴业银行"],
						series: [{
								name: "收入",
								data: [35, 36, 31, 33]
							},
							{
								name: "支出",
								data: [18, 27, 21, 24]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerDataBar() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2020", "2021", "2022", "2023"],
						series: [{
								name: "客户金额",
								data: [82.40, 33, 13, 34, ]
							}

						]
					};
					this.chartDataBar = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerDataBar1() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2020", "2021", "2022", "2023"],
						series: [{
								name: "供货商/金额",
								data: [82.40, 33, 13, 34, ]
							}

						]
					};
					this.chartDataBar1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerDataPie() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "管理费用",
								"value": 50
							}, {
								"name": "销售费用",
								"value": 40
							}, {
								"name": "财务费用",
								"value": 20
							}]
						}]
					};
					this.chartDataPie = JSON.parse(JSON.stringify(res));
				}, 500);
			},

		}
	};
</script>
<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 252rpx;

	}

	.text1 {}

	.charts-box-pie {
		width: 100%;
		height: 100%;

	}

	body *,
	page view {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
			Arial, PingFang SC-Light, Microsoft YaHei;
		margin: 0;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}

	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		width: 750rpx;
		height: 5040rpx;
		overflow: hidden;
	}

	.group_1 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 0px 0px 2px 2px;
		position: relative;
		width: 750rpx;
		height: 220rpx;
	}

	.group_2 {
		width: 750rpx;
		height: 178rpx;
	}

	.image_1 {
		width: 750rpx;
		height: 88rpx;
	}

	.nav-bar_1 {
		width: 740rpx;
		height: 94rpx;
		margin: 84rpx 8rpx 0 -748rpx;
	}

	.label_1 {
		width: 48rpx;
		height: 48rpx;
		margin: 24rpx 0 0 30rpx;
	}

	.applet-top-bar_1 {
		width: 174rpx;
		height: 64rpx;
		margin: 16rpx 24rpx 0 464rpx;
	}

	.group_3 {
		width: 686rpx;
		height: 40rpx;
		margin: 18rpx 0 164rpx 32rpx;
	}

	.image-text_1 {
		width: 364rpx;
		height: 40rpx;
	}

	.text-group_1 {
		width: 328rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.thumbnail_1 {
		width: 28rpx;
		height: 28rpx;
		margin-top: 6rpx;
	}

	.image-text_2 {
		width: 190rpx;
		height: 40rpx;
	}

	.text-group_2 {
		width: 152rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.thumbnail_2 {
		width: 28rpx;
		height: 28rpx;
		margin-top: 6rpx;
	}

	.group_4 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		height: 188rpx;
		width: 686rpx;
		position: absolute;
		left: 32rpx;
		top: 88rpx;
	}

	.list_1 {
		width: 510rpx;
		height: 108rpx;
		justify-content: space-between;
		margin: 40rpx 0 0 88rpx;
	}

	.text-group_3 {
		width: 176rpx;
		height: 108rpx;
		margin-right: 178rpx;
	}

	.text_1 {
		width: 176rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.text_2 {
		width: 58rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 0.8);
		font-size: 28rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 18rpx 0 0 60rpx;
	}

	.group_5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		width: 686rpx;
		height: 962rpx;
		justify-content: flex-center;
		margin: 84rpx 0 0 32rpx;
	}

	.box_1 {
		width: 204rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.box_2 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_3 {
		width: 180rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.box_3 {
		background-color: rgba(250, 250, 250, 1);
		border-radius: 8px;
		height: 440rpx;
		width: 630rpx;
		margin: 32rpx 0 0 28rpx;
	}

	.section_1 {
		height: 384rpx;
		width: 576rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.block_1 {
		width: 574rpx;
		height: 44rpx;
		margin-left: 2rpx;
	}

	.image-text_3 {
		width: 92rpx;
		height: 40rpx;
		margin-top: 2rpx;
	}

	.box_4 {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		border: 1.5px solid rgba(202, 202, 202, 1);
		margin-top: 12rpx;
	}

	.text-group_4 {
		width: 56rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_4 {
		width: 126rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 168, 0, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.block_2 {
		width: 574rpx;
		height: 44rpx;
		margin: 42rpx 0 0 2rpx;
	}

	.image-text_4 {
		width: 148rpx;
		height: 40rpx;
		margin-top: 2rpx;
	}

	.group_6 {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		border: 1.5px solid rgba(202, 202, 202, 1);
		margin-top: 10rpx;
	}

	.text-group_5 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_5 {
		width: 126rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 168, 0, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.block_3 {
		width: 574rpx;
		height: 44rpx;
		margin: 40rpx 0 0 2rpx;
	}

	.image-text_5 {
		width: 146rpx;
		height: 40rpx;
		margin-top: 2rpx;
	}

	.block_4 {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		border: 1.5px solid rgba(202, 202, 202, 1);
		margin-top: 12rpx;
	}

	.text-group_6 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_6 {
		width: 120rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 168, 0, 1);
		font-size: 28rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.block_5 {
		width: 574rpx;
		height: 44rpx;
		margin: 40rpx 0 0 2rpx;
	}

	.image-text_6 {
		width: 150rpx;
		height: 40rpx;
		margin-top: 4rpx;
	}

	.group_7 {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		border: 1.5px solid rgba(202, 202, 202, 1);
		margin-top: 10rpx;
	}

	.text-group_7 {
		width: 116rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_7 {
		width: 106rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 168, 0, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.block_6 {
		width: 574rpx;
		height: 44rpx;
		margin: 42rpx 0 0 2rpx;
	}

	.image-text_7 {
		width: 146rpx;
		height: 40rpx;
		margin-top: 2rpx;
	}

	.box_5 {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		border: 1.5px solid rgba(202, 202, 202, 1);
		margin-top: 12rpx;
	}

	.text-group_8 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_8 {
		width: 116rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 168, 0, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.box_6 {
		width: 630rpx;
		height: 88rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.text-group_9 {
		width: 126rpx;
		height: 88rpx;
	}

	.text_9 {
		width: 126rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.text_10 {
		width: 60rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
	}

	.box_7 {
		width: 72rpx;
		height: 44rpx;
		margin-left: 328rpx;
	}

	.image-text_8 {
		width: 72rpx;
		height: 44rpx;
	}

	.group_8 {
		background-color: rgba(60, 114, 255, 1);
		width: 16rpx;
		height: 16rpx;
		margin-top: 14rpx;
	}

	.text-group_10 {
		width: 48rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.box_8 {
		width: 72rpx;
		height: 44rpx;
		margin-left: 32rpx;
	}

	.image-text_9 {
		width: 72rpx;
		height: 44rpx;
	}

	.group_9 {
		background-color: rgba(0, 186, 173, 1);
		width: 16rpx;
		height: 16rpx;
		margin-top: 14rpx;
	}

	.text-group_11 {
		width: 48rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.box_9 {
		width: 552rpx;
		height: 252rpx;
		margin: 16rpx 0 28rpx 66rpx;
	}

	.image-text_10 {
		width: 80rpx;
		height: 208rpx;
		margin-top: 44rpx;
	}

	.image-text_11 {
		width: 80rpx;
		height: 156rpx;
		margin-top: 52rpx;
	}

	.block_7 {
		background-color: rgba(0, 186, 173, 1);
		width: 24rpx;
		height: 100rpx;
		margin-left: 40rpx;
	}

	.text_11 {
		width: 120rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin-top: 12rpx;
	}

	.group_10 {
		background-color: rgba(60, 114, 255, 1);
		width: 24rpx;
		height: 152rpx;
		margin: 0 40rpx 0 -64rpx;
	}

	.group_11 {
		width: 80rpx;
		height: 252rpx;
		margin-left: 78rpx;
	}

	.group_12 {
		width: 48rpx;
		height: 196rpx;
		margin-left: 16rpx;
	}

	.box_10 {
		background-color: rgba(60, 114, 255, 1);
		width: 24rpx;
		height: 196rpx;
	}

	.box_11 {
		background-color: rgba(0, 186, 173, 1);
		width: 24rpx;
		height: 152rpx;
		margin-top: 44rpx;
	}

	.text_12 {
		width: 80rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin-top: 12rpx;
	}

	.group_13 {
		width: 82rpx;
		height: 240rpx;
		margin: 12rpx 0 0 76rpx;
	}

	.group_14 {
		width: 48rpx;
		height: 184rpx;
		margin-left: 16rpx;
	}

	.box_12 {
		background-color: rgba(60, 114, 255, 1);
		width: 24rpx;
		height: 184rpx;
	}

	.box_13 {
		background-color: rgba(0, 186, 173, 1);
		width: 24rpx;
		height: 150rpx;
		margin-top: 34rpx;
	}

	.text_13 {
		width: 82rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin-top: 12rpx;
	}

	.group_15 {
		width: 80rpx;
		height: 192rpx;
		margin: 60rpx 0 0 76rpx;
	}

	.group_16 {
		width: 48rpx;
		height: 136rpx;
		margin-left: 16rpx;
	}

	.box_14 {
		background-color: rgba(60, 114, 255, 1);
		width: 24rpx;
		height: 136rpx;
	}

	.box_15 {
		background-color: rgba(0, 186, 173, 1);
		width: 24rpx;
		height: 100rpx;
		margin-top: 36rpx;
	}

	.text_14 {
		width: 80rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin-top: 12rpx;
	}

	.list_2 {
		width: 686rpx;
		height: 1436rpx;
		justify-content: space-between;
		margin: 28rpx 0 0 32rpx;
	}

	.list-items_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		width: 686rpx;
		height: 704rpx;
		margin-bottom: 28rpx;
		justify-content: flex-center;
	}

	.section_2 {
		width: 168rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.box_16 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_15 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.section_3 {
		width: 680rpx;
		height: 256rpx;

	}

	.text-wrapper_1 {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx 0 30rpx;
		width: 660rpx;
	}

	.text_16 {
		width: 84rpx;
		height: 44rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		white-space: nowrap;
		line-height: 44rpx;
		margin-top: 32rpx;
	}

	.text_17 {
		color: rgba(102, 102, 102, 1);
		margin-top: 16rpx;
		width: 84rpx;
		height: 24rpx;
		font-size: 28rpx;
		white-space: nowrap;
		line-height: 24rpx;
		text-align: right;
	}

	.text-group_12 {
		width: 144rpx;
		height: 236rpx;
	}

	.text_18 {
		width: 144rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.text_19 {
		width: 160rpx;
		height: 176rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin: 16rpx 0 0 34rpx;
	}

	.text_20 {
		width: 154rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin: 50rpx 0 0 28rpx;
	}

	.image_2 {
		width: 550rpx;
		height: 32rpx;
		margin: 24rpx 0 0 28rpx;
	}

	.image_3 {
		width: 478rpx;
		height: 32rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.image_4 {
		width: 428rpx;
		height: 32rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.image_5 {
		width: 372rpx;
		height: 32rpx;
		margin: 28rpx 0 28rpx 28rpx;
	}

	.group_17 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		height: 868rpx;
		width: 686rpx;
		justify-content: flex-center;
		margin: 28rpx 0 0 32rpx;
	}

	.box_17 {
		width: 96rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.group_18 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_21 {
		width: 72rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.box_18 {
		width: 630rpx;
		height: 280rpx;

	}

	.text-wrapper_2 {
		margin-top: 30rpx;
		width: 680rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.text-group_13 {
		width: 680rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.text_22 {
		width: 112rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.paragraph_1 {
		width: 84rpx;
		height: 220rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin-top: 16rpx;
	}

	.text_23 {
		width: 112rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin-left: 148rpx;
	}



	.text_24 {
		width: 112rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin-left: 8rpx;
	}

	.paragraph_2 {
		width: 130rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 34rpx;
		margin-top: 10rpx;
	}

	.box_19 {
		width: 630rpx;
		height: 400rpx;
		margin: 50rpx 0 28rpx 28rpx;
	}

	.group_19 {
		width: 120rpx;
		height: 148rpx;
		margin-top: 126rpx;
	}

	.group_20 {
		width: 120rpx;
		height: 44rpx;
	}

	.image-text_12 {
		width: 120rpx;
		height: 44rpx;
	}

	.block_8 {
		background-color: rgba(60, 114, 255, 1);
		width: 16rpx;
		height: 16rpx;
		margin-top: 14rpx;
	}

	.text-group_14 {
		width: 96rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.group_21 {
		width: 120rpx;
		height: 44rpx;
		margin-top: 8rpx;
	}

	.image-text_13 {
		width: 120rpx;
		height: 44rpx;
	}

	.group_22 {
		background-color: rgba(0, 186, 173, 1);
		width: 16rpx;
		height: 16rpx;
		margin-top: 14rpx;
	}

	.text-group_15 {
		width: 96rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.group_23 {
		width: 120rpx;
		height: 44rpx;
		margin-top: 8rpx;
	}

	.image-text_14 {
		width: 120rpx;
		height: 44rpx;
	}

	.group_24 {
		background-color: rgba(255, 168, 0, 1);
		width: 16rpx;
		height: 16rpx;
		margin-top: 14rpx;
	}

	.text-group_16 {
		width: 96rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
	}

	.chart_1 {
		height: 400rpx;
		width: 400rpx;
	}

	.group_25 {
		height: 362rpx;
		background: white 100% no-repeat;
		background-size: 100% 100%;
		margin-left: 200rpx;
		width: 200rpx;
		position: relative;
	}

	.text_25 {
		width: 80rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 158rpx 0 0 62rpx;
	}

	.section_4 {
		height: 200rpx;
		background: white -2rpx 0rpx no-repeat;
		background-size: 310rpx 200rpx;
		width: 308rpx;
		position: absolute;
		left: -190rpx;
		top: 200rpx;
	}

	.text_26 {
		width: 80rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 88rpx 0 0 120rpx;
	}

	.text-wrapper_3 {
		height: 262rpx;
		background: white 0rpx 0rpx no-repeat;
		background-size: 202rpx 262rpx;
		width: 200rpx;
		position: absolute;
		left: -10rpx;
		top: -200rpx;
	}

	.text_27 {
		width: 80rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 118rpx 0 0 80rpx;
	}

	.group_26 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		width: 686rpx;
		height: 522rpx;
		justify-content: flex-center;
		margin: 28rpx 0 0 32rpx;
	}

	.group_27 {
		width: 168rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.block_9 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_28 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.grid_1 {
		width: 630rpx;
		height: 248rpx;
		flex-wrap: wrap;
		margin: 32rpx 0 0 28rpx;
	}

	.text-group_17 {
		background-color: rgba(245, 245, 245, 1);
		border-radius: 6px;
		width: 194rpx;
		height: 112rpx;
		justify-content: flex-center;
		margin: 0 24rpx 24rpx 0;
	}

	.text-group_17:nth-child(3n) {
		margin-right: 0;
	}

	.text-group_17:nth-last-child(-n + 3) {
		margin-bottom: 0;
	}

	.text_29 {
		width: 62rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 16rpx 0 0 66rpx;
	}

	.text_30 {
		width: 72rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 6rpx 0 16rpx 62rpx;
	}

	.tag_1 {
		background-color: rgba(245, 245, 245, 1);
		border-radius: 6px;
		width: 194rpx;
		height: 112rpx;
		margin: 24rpx 0 28rpx 28rpx;
	}

	.text-group_18 {
		width: 72rpx;
		height: 80rpx;
		margin: 16rpx 0 0 62rpx;
	}

	.text_31 {
		width: 58rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 6rpx;
	}

	.text_32 {
		width: 72rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 6rpx;
	}

	.group_28 {
		width: 750rpx;
		height: 622rpx;
	}

	.group_29 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 12px;
		width: 686rpx;
		height: 226rpx;
		justify-content: flex-center;
		margin: 28rpx 0 0 32rpx;
	}

	.group_30 {
		width: 226rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.block_10 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_33 {
		width: 202rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.paragraph_3 {
		width: 630rpx;
		height: 88rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin: 32rpx 0 28rpx 28rpx;
	}

	.group_31 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		width: 686rpx;
		height: 320rpx;
		justify-content: flex-center;
		margin: 28rpx 0 20rpx 32rpx;
	}

	.block_11 {
		width: 298rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.group_32 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_34 {
		width: 274rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}

	.paragraph_4 {
		width: 630rpx;
		height: 88rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		margin: 32rpx 0 0 28rpx;
	}

	.text_35 {
		width: 630rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin: 50rpx 0 28rpx 28rpx;
	}

	.image_6 {
		width: 750rpx;
		height: 64rpx;
		margin-top: -2rpx;
	}
</style>